<template>
	<view class="bottom-panel">
	     <view class="panel" >
			<view class="bottom-fab" ref="fabRef" :style="{ opacity:  `${isMoved?1:0}`, width: `${isMoved?fabWidth:0}rpx`}">
				<view class="bottom-fab-slider" >
					<view v-if="!cartNum>0">暂无订单</view>
					<view v-if="cartNum>0">{{cartPrice}}元/{{cartNum}}次</view>
				</view>
				
				<view class="payOrder" @click="goConfirmOrder">{{cartNum>0?"去结算":"不可结算"}}</view>
				
			</view>
			
			<view @tap="open" class="cartcions" :style="{ transform: `translateX(${isMoved?-translateX:0}rpx)`,background: `${isMoved?'#fff':'#3366FF'}` }">
				<uni-icons type="cart-filled" size="35" :color="isMoved?'#3366FF':'#fff'"></uni-icons>
				<uni-badge v-if="!isMoved" class="uni-badge-left-margin" :text="cartNum" max-num="10" :custom-style="customStyle"/>
			</view>
			
	     </view>
		   
		 <view class="payment" :class="value === true ? 'on' : ''">
			 <view class="header">
				 <view class="left">
					 <uni-icons type="checkbox" size="28" color="#000000" ></uni-icons>
					 已选商品({{cartList.length}}件)
				</view>
				 <view class="left" @tap="deleteAll">
					 <uni-icons type="trash" size="28" color="#000000" ></uni-icons>
						<text>清空购物车</text>
				 </view>
			 </view>
			 	<OrderGoods :cartEdit='0' @computePrice="getCartList" :evaluate="0" :cartInfo="cartList" style="border-radius: 20rpx;"></OrderGoods>
			  
		 </view>
		 <view class="mask panelmask" v-show="value" @click="close()"></view>
	
	 </view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
		import OrderGoods from '@/components/bottomPanelGoods';
	import { getCategory,postCartAdd, getProducts,getCartList, postCartDel, changeCartNum, getCartCount} from '@/api/store';
	import { mapState, mapMutations, mapActions } from 'vuex';
	export default {
		name:"bottomPanel",
		data() {
			return {
				
				value:false,
				cartNum:0,
				cartPrice:0,
				cartList:[],//购物车列表
				fabWidth:0,
				isMoved:false,
				translateX :0, //动态设置的移动距离
				customStyle:{
					backgroundColor: '#ff0000',
					color: '#fff',
					position: 'fixed',
					left: '82rpx',
					width: '50rpx',
					height: '50rpx',
					minWidth: '50rpx',
					fontSize: '30rpx',
					lineHeight: '50rpx',
					top:'-8rpx'
									
				}
			};
		},
		components: {
			OrderGoods
		},
		computed: mapGetters(['deviceInfo']),
		created() {
			this.getCartList()
		
		},
		methods:{
			 getViewWidth() {
				 const { windowWidth, windowHeight } = uni.getSystemInfoSync();
				 this.fabWidth =  windowWidth/(uni.upx2px(100)/100) - 60
			      const query = uni.createSelectorQuery().in(this);
				  let width = 0
			      query.select('.bottom-fab-slider').boundingClientRect((rect) => {
					  console.log(rect)
			        if (rect) {
			          this.translateX =  this.fabWidth-120; // 获取元素的宽度
			        }
			
					console.log(this.translateX,this.translateX)
			      }).exec();
	
			    },
			deleteAll(){
				let that = this;
				let ids = [];
				for (var i = 0; i < that.cartList.length; i++) {
					
					ids.push(that.cartList[i].id)
				}
				postCartDel(ids).then(res=>{
					
					if(res.success){
						uni.showToast({
							title: '购物车清空成功',
							icon: 'none',
							duration: 2000
						});
						that.getCartList()
						that.close()
					}
				})
			},
			open(){
				
				if(this.cartList.length>0   ){
					 this.value = true;
					 this.getViewWidth()
					 this.isMoved = true;
				}
				
				
				console.log(this.isMoved)
				
				
			},
			close() {
			  this.value = false;
			  this.isMoved = false;
			},
			closeMove(){
				 this.isMoved = false;
			},
			//获取购物车列表
			getCartList: function() {
				let that = this;
				getCartList({deviceId:this.deviceInfo.deviceId}).then(res => {
					that.cartList = res.data.valid;
					// that.validMap = res.data.validMap;
					that.cartNum = 0;
					that.cartPrice = 0;
					for (var i = 0; i < that.cartList.length; i++) {
						let cart = that.cartList[i]
						that.cartNum = that.cartNum + cart.cartNum
						that.cartPrice = that.cartPrice + cart.truePrice * cart.cartNum
					} 
					if(that.cartList.length==0){
						that.close()
					} 
					that.cartPrice = that.cartPrice.toFixed(2)
					
					this.$emit("refresh",that.cartList)
				});
			},
			//去结算页面
			goConfirmOrder:function(){
				if(this.deviceInfo.deviceId==''){
					this.$emit("openDialog")
					return;
				}
				// sessionStorage.setItem("order_tag",orderFlag);
				let that = this,
				id = [],
				list = that.cartList;
			
				list.forEach(function(val) {
					id.push(val.id);
				});
				
			if (id.length === 0) {
				uni.showToast({
					title: '请添加商品',
					icon: 'none',
					duration: 2000
				});
				return;
			}
				
				
				this.$yrouter.push({
					path: '/pages/order/OrderSubmission/index',
					query: {
						id: id.join(',')
					}
				});
			},
		}
	}
</script>
<style  lang="scss">

	.panelmask {
	    background-color: rgba(0, 0, 0, 0.3);
	}
	.payment {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  // border-radius: 0.56*100rpx 0.56*100rpx 0 0;
	  background-color: #fff;
	  padding-bottom: 1.8*100rpx;
	  padding-left: 25rpx;
	  padding-right: 25rpx;
	  padding-top: 10rpx;
	  z-index: 56;
	  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	  transform: translate3d(0, 100%, 0);
	  -webkit-transform: translate3d(0, 100%, 0);
	  -ms-transform: translate3d(0, 100%, 0);
	  -moz-transform: translate3d(0, 100%, 0);
	  -o-transform: translate3d(0, 100%, 0);
	}
	.payment.on {
	  transform: translate3d(0, 0, 0);
	  -webkit-transform: translate3d(0, 0, 0);
	  -ms-transform: translate3d(0, 0, 0);
	  -moz-transform: translate3d(0, 0, 0);
	  -o-transform: translate3d(0, 0, 0);
	}
	.payment .header{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #000;
		height: 80rpx;
		align-items: center;
	}
	.payment .header .left{
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}

 .bottom-panel{
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);  
        // padding-bottom: env(safe-area-inset-bottom);        
    }
	.bottom-panel .panel{
		text-align: center;
		font-size: 28rpx;
		position: fixed;
		width: 100%;
		z-index: 998;
		bottom: 0rpx;
	}
	.payOrder{
		width: 270rpx;
		color: #fff;
		background-color: #3366FF;
		height: 120rpx;
		border-radius:0rpx 130rpx 130rpx 0rpx;
		align-items: center;
		line-height: 120rpx;
		font-size: 33rpx;
		// position: fixed;
		right: 40rpx;
	}
	.bottom-fab{
		z-index: 999;
		position: absolute;
		bottom: 50rpx;
		right: 40rpx;
		// left:30rpx;
		width: 119rpx;
		display: flex;
		height: 120rpx;
		border-radius: 65rpx;
		background-color: #fff;
		align-items: center;
		// padding-left: 10rpx;
		box-shadow: -3px 5px 14px 3px rgba(0, 0, 0, 0.1);
		 overflow: hidden;
		 justify-content: start;
		  transition:  width 0.5s, opacity 0.5s; /* 平滑过渡效果 */
		image{
		    width:80rpx;
		    height: 80rpx;
		    margin-right: 16rpx;
		    margin-left: 2px;
		}
		
	}
	
	.bottom-fab-slider {
		font-size: 34rpx;
	     display: flex;
	     margin-left: 160rpx;
	     align-items: center;
	     width: 100%;
	     justify-content: start;
	     position: relative;
	     overflow: hidden;
	 }
	
	.cartcions {
	      background: #3366FF;
	      height: 120rpx;
	      width: 120rpx;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      border-radius: 50%;
	      // transition: -webkit-transform 1s;
	      // transition: transform 1s;
	      transition: transform 0.5s, -webkit-transform 0.5s, background 0.5s;
	      position: fixed;
	      right: 20px;
	      z-index: 999;
	      bottom: 50rpx;
	}
	


</style>